<template>
  <div class="paper-search pad">
    <div class="head">
      <span>调查问卷模板查询</span>
    </div>
    <div class="search m-t-b">
      <el-input placeholder="问卷名称" v-model="searchTxt" clearable @input="clearSearch" />
      <el-button @click="handleSearch" type="primary">
        <i class="el-icon-search"></i> 搜索
      </el-button>
    </div>
    <el-table class="m-t-b" border stripe :data="papers" v-loading="loading">
      <el-table-column label="问卷编号" prop="number"></el-table-column>
      <el-table-column label="问卷名称" prop="name"></el-table-column>
      <el-table-column label="上传时间" prop="createDate">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="lookPaper(scope.row)" icon="el-icon-view" circle=""></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagi flex m-t-b"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import {
  getPaperList
} from '../api';
import { formatDate } from '../util'

export default {
  name: 'paper-search',
  data () {
    return {
      searchTxt: '',
      loading: true,
      pageSize: 10,
      total: 0,
      papers: []
    }
  },
  methods: {
    handleSearch () {
      if (!this.$checkAuth('canSearchQuestionnaire')) {
        return this.$message.error('暂无对应操作权限!')
      };
      if (!this.searchTxt.trim()) {
        this.searchTxt = ''
        return this.$message.error('请输入搜索内容!')
      }
      this.fetchList(1, this.searchTxt)
    },
    handlePagi (page) {
      if (this.searchTxt.trim()) {
        this.fetchList(page, this.searchTxt)
      } else {
        this.fetchList(page)
      }
    },
    clearSearch () {
      if (!this.searchTxt) {
        this.fetchList(1)
      }
    },
    lookPaper (paper) {
      if (!this.$checkAuth('canSeeQuestionnaire')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.$router.push('/template/paper/' + paper.questionnaireId + '/' + paper.name)
    },
    fetchList (index, name) {
      this.loading = true
      name = name || null
      getPaperList({
        index,
        count: this.pageSize,
        queryParam: {
          name
        }
      })
      .then(res => {
        if (res.data.code === 1) {
          this.total = res.data.data.totalRecord;
          let list = res.data.data.list || [];
          for (let i = 0; i < list.length; i ++) {
            list[i].createDate = list[i].createDate ? formatDate(list[i].createDate) : '无'
          };
          this.papers = list
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
        this.loading = false
      })
      .catch(e => {
        this.loading = false
        this.$message.error('网络异常!')
      })
    }
  },
  created () {
    this.fetchList(1)
  }
}
</script>
<style lang="scss">
  .paper-search {
    .search {
      display: flex;
    }
    table {
      .cell {
        text-align: center;
      }
    }
  }
</style>
